<template>
    <div class="edu-page-warp">
        <div class="edu-page-title mg-top">
            <el-row :gutter="20" style="height: 50px;">
                <el-col :span="6">
                    <div class="empty-box"></div>
                </el-col>
                <el-col :span="12">
                    <el-steps :active="activeIndex" align-center>
                        <el-step title="基本信息"></el-step>
                        <el-step title="异动原因设置"></el-step>
                        <el-step title="字段显示设置"></el-step>
                    </el-steps>
                </el-col>
                <el-col :span="6">
                    <div class="empty-box"></div>
                </el-col>
            </el-row>
        </div>
        <div>
            <el-form ref="queryForm" label-width="80px" class="bg-white pd-12px">
                <base-info :form="baseInfoForm" v-if="activeIndex === 1"/>
                <reason
                    :type-id="baseInfoForm.typeId"
                    :type-name="baseInfoForm.typeName"
                    v-if="activeIndex === 2"
                />
                <field v-if="activeIndex === 3" :type-id="baseInfoForm.typeId" :fields="fields"/>
            </el-form>
        </div>
        <div class="footer">
            <el-row :gutter="20" style="height: 50px;">
                <el-col :span="24">
                    <div class="float-right">
                        <el-button plain v-show="activeIndex > 1" @click="prev()" size="mini">上一步</el-button>
                        <el-button plain v-show="activeIndex < 3" size="mini" @click="saveData">保存</el-button>
                        <el-button
                            type="primary"
                            v-show="activeIndex < 3"
                            @click="next()"
                            size="mini"
                        >下一步</el-button>
                        <el-button
                            type="primary"
                            v-show="activeIndex === 3"
                            @click="saveData"
                            size="mini"
                        >完成</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import baseInfo from "./BaseInfo";
import reason from "./Reason";
import field from "./Field";
import * as API from "common/src/api/studentStatus";
export default {
    components: { baseInfo, reason, field },
    data() {
        return {
            baseInfoForm: {
                classId: "",
                typeName: "",
                changeTime: "",
                usedByStudent: "",
                studentType: "",
                remark: ""
            },
            fields: [],
            activeIndex: 1
        };
    },
    mounted() {
        let typeId = this.$route.params.typeId;
        if (typeId) {
            this.initFields(typeId);
        }
    },
    methods: {
        prev() {
            let { activeIndex } = this;
            if (activeIndex > 1) {
                this.activeIndex--;
            }
        },
        next() {
            this.saveData(this.saveCallBack);
        },
        saveBasicInfo(callback) {
            API.addStatusCategoryBasic(this.baseInfoForm).then(response => {
                let { code, data } = response;
                if (code === 200) {
                    this.baseInfoForm.typeId = data;
                    this.initFields(data);
                    callback && callback();
                }
            });
             callback && callback();
        },
        editBasicInfo(callback) {
            API.editStatusCategoryBasic(this.baseInfoForm).then(response => {
                let { code, data } = response;
                if (code === 200) {
                    this.typeId = data;
                    callback && callback();
                }
            });
        },
        saveData(callback) {
            let { activeIndex } = this;
            if (activeIndex === 1) {
                if (this.baseInfoForm.bastypeId) {
                    // 走修改基本信息的逻辑
                    this.editBasicInfo(callback);
                } else {
                    this.saveBasicInfo(callback);
                }
            } else if (activeIndex === 3) {
                this.updateFields();
            } else {
                callback && callback();
            }
        },
        saveCallBack() {
            let { activeIndex } = this;
            if (activeIndex < 3) {
                this.activeIndex++;
            }
        },
        initFields(typeId) {
            let getFieldsPromise = API.getFields();
            let getSetedFieldsPromise = API.getSetedFields(typeId);
            Promise.all([getFieldsPromise, getSetedFieldsPromise]).then(
                response => {
                    let [
                        { code: code1, data: fields },
                        { code: code2, data: setedFields }
                    ] = response;
                    if (code1 === 200 && code2 === 200) {
                        this.fields = fields.map(element => {
                            let setedField = setedFields.find(
                                e => e.fieldId === element.id
                            );
                            if (setedField) {
                                let {
                                    isShow,
                                    studentMdf,
                                    schoolMdf,
                                    facultyMdf
                                } = setedField;
                                return {
                                    ...element,
                                    isShow,
                                    studentMdf,
                                    schoolMdf,
                                    facultyMdf
                                };
                            }
                            return {
                                ...element,
                                isShow: 0,
                                studentMdf: 0,
                                schoolMdf: 0,
                                facultyMdf: 0
                            };
                        });
                    }
                }
            );
        },
        updateFields() {
            let params = this.fields.map(item => ({
                abnormalTypeId: this.typeId,
                fieldId: item.id,
                isShow: item.isShow,
                studentMdf: item.studentMdf,
                schoolMdf: item.schoolMdf,
                facultyMdf: item.facultyMdf
            }));
            API.updateFields(params).then(response => {
                if (response.code === 200) {
                    this.$router.push({
                        name: "statusCategoryExt"
                    });
                }
            });
        }
    }
};
</script>
<style scoped>
.footer {
    margin-top: 20px;
}
.el-form {
    padding: 0 !important;
}
</style>
